<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline"  class="formInline" ref="formInline"
            label-width="76px" slot="form">
                <el-row :gutter="41">
                        <el-col :span="8">
                            <el-form-item label="分类">
                              <el-select v-model="formInline.typeName" placeholder="请选择类别" style="width:100%">
                                <el-option v-for="(item,index) in classification" 
                                :key="index" :label="item.sName" 
                                 :value="item.pId"> </el-option>
                              </el-select>
                            </el-form-item>
                        </el-col>
                        <el-button type="primary" @click="search('formInline')">查询</el-button>
                    </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                     <el-button @click="editClassification">分类管理</el-button>
                     <el-button @click="newEssage">新建文章</el-button>
                </div>
            </div>
           <el-table :data="AnnounceList" style="width: 100%" 
            border v-loading="loading">
                <el-table-column align="center" label="文章标题">
                    <template scope="scope">
                         <!-- <span class="link-src">{{scope.row.title}}</span> -->
                         <span>{{scope.row.title||'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="发布者">
                     <template scope="scope">
                        {{scope.row.publisher?scope.row.publisher:'--'}}
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="更新时间" min-width="150px">
                     <template scope="scope">
                        {{scope.row.time?scope.row.time:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="类别名称">
                     <template scope="scope">
                        {{scope.row.type?scope.row.type:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" width="160px">
                    <template scope="scope">
                        <el-button  type="text" class="btn-success"
                         @click="edit(scope.row)">编辑</el-button>
                        <el-button  type="text" class="btn-success"
                         @click="deleteListOne(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
       <editDialog :editData="editData" @search-list="search('formInline')" @searchAll="searchAll" ref="chil"> </editDialog>   
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import editDialog from './editDialog';
import { selectArticle, selectTypeName, deleteArticle} from 'api/eschool';
export default {
    name: 'essayList',
    components: { editDialog, TableLayout },
    data() {
        return {
            formInline: {
                typeName: '' // 类别名称
            },
            classification: [],
            AnnounceList: [],
            loading: true, // 查询时的加载提示
            listQuery: { // 分页
                page: 1,
                total: 0
            },
            editData: {
                dialogEdit: false
            }
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters(['uid', 'schoolId', 'roleType'])
    },
    created() {
        this.searchFetchData();
        this.selectTypeName();
    },
 
    methods: {
        ...mapActions(['ChangePageSize']),
        searchAll() {
            this.searchFetchData();
            this.selectTypeName();
        },
        // 分类下拉
        selectTypeName() {
            selectTypeName(this.schoolId).then(res => {
                this.classification=res.data.content;
                this.classification.unshift({pId: '', sName: '全部'})
            })
        },
        // 点击编辑分类
        editClassification() {
            this.editData.dialogEdit = true;
        },
            // 新建文章
        newEssage() {
            let status='1';
            this.$router.push({path: `/essayManagement/addEssay/${status}`})
        },
        // 编辑
        edit(row) {
            let status='2';
            let id=row.articleId;
            this.$router.push({path: `/essayManagement/changeEssay/${status}/${id}`})
        },
         // 单个删除
        deleteListOne(row) {
            this.$confirm('删除后，该文章将无法找回，还请谨慎操作！', '您确定要删除这篇文章吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ' // warning
            }).then(() => {
                let articleId=row.articleId;
                this.delArticle(this.schoolId, articleId);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    //   删除文章
        delArticle(schoolId, articleId) {
            deleteArticle(schoolId, articleId).then(res => {
                this.$refs.chil.editType()// 刷新分类管理弹窗中的数据
                this.$message.success('删除成功');
                this.searchFetchData();
            })
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let curPage = this.listQuery.page,
                pageSize = this.config.pageSize,
                schoolId=this.schoolId,
                typeId=this.formInline.typeName;
            selectArticle(curPage, pageSize, schoolId, typeId).then(res => {
                this.AnnounceList=res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;
            }).catch(() => {
                this.loading=false
            });
        },
        // 查询列表
        search() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
          // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../styles/var';

.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
}
</style>


